<!--分页组件-->
<template>
    <div>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPageL" :page-sizes="pageSizesL" :page-size="pageSizeL" layout="total, sizes, prev, pager, next, jumper" :total="totalL">
        </el-pagination>
    </div>
</template>
<script>
export default {
  name: "Pagination",
  props: {
    currentPage: Number,
    total: Number,
    pageSizes: Array,
    pageSize: Number
  },
  data() {
    return {
      currentPageL: this.currentPage, //默认第一页
      totalL: this.total, //总条数
      pageSizesL: this.pageSizes, //每页展示多少条
      pageSizeL: this.pageSize //默认第一页展示10条
    };
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      let path = this.$route.fullPath;
      let query = this.$route.query;
      let size = {
        size: val
      };
      let newQuery = this.$Method.NewQuery(query, size);
      this.$router.push({ path: path, query: newQuery });
    },
    handleCurrentChange(val) {
      let path = this.$route.fullPath;
      let query = this.$route.query;
      let size = {
        page: val
      };
      let newQuery = this.$Method.NewQuery(query, size);
      this.$router.push({ path: path, query: newQuery });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #cc4455;
}
</style>
